<template>
    <div class="wrapper">
        <div
            class="wrapper-tab"
            v-for="(item,index) in tabList"
            :key="index"
            :class="currentId == item.id ? 'select-item' : ''"
            @click="selectEvent(item.id)">
            {{ item.label }}
        </div>
        <div class="wrapper-line" :class="currentId ? `wrapper-line-${currentId}` : ''"/>
    </div>
</template>

<script>
export default {
    name: "Index",
    data() {
        return {
            tabList: [
                { label: '本公司', id: 1 },
                { label: '我维护的', id: 2 }
            ],
            currentId: 1
        };
    },
    methods: {
        selectEvent(id) {
            this.currentId = id;
        }
    }
};
</script>

<style scoped lang="scss">
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;

    &-tab {
        margin: 10px;
        color: #d3dce6;
        position: relative;
    }

    // 控制台属性class显示：wrapper-line wrapper-line-1
    &-line {
        width: 20px;
        height: 2px;
        background-color: blue;
        position: absolute;
        transition: all .2s;

        &-1 {
            top: 30px;
            left: 10px;
        }

        &-2 {
            top: 30px;
            left: 80px;
        }
    }

    // 不能放在&-tab里面，否则会不显示，因为不是他的子元素
    .select-item {
        color: blue;
    }
}
</style>